<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的代付款订单</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/heard.css"/>
    <link rel="stylesheet" type="text/css" href="../css/dingdan.css"/>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jq.min.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
</head>
<body style="background: #f4f4f4;">
<!--顶部标题栏-->
<div class="header" id="topbar">
    <div class="left" tapmode onclick="goback()">
        <img src="../image/fhui.png" alt="" class="logoleft">
    </div>
    <div class="t">
        <span class="title">我的代付款订单</span>
    </div>
</div>

<!-- 待付款 -->
<div class="container" id="app">
    <div class="orders" v-for="item in list">
        <div class="order">
            <div class="h">
                <div class="l">订单编号：{{item.order_sn}}</div>
                <div class="r">{{item.order_status_text}}</div>
            </div>
            <div class="goods">
                <div class="img"><img
                        v-bind:src="item.photo_x">
                </div>
                <div class="info">
                    <span class="name">{{item.name}}</span>

                    <span class="number">共{{item.pro_count}}件商品X单价：¥ {{item.price_yh}} 数量：X{{item.product_num}}</span>
                </div>
                <div class="status"></div>
            </div>
            <div class="b">
                <div class="l">实付：￥{{item.price}}</div>
                <div class="r">
                    <div @click="go_Order(item.id)" class="btn">订单详情</div>
                    <button class="btn" onclick="removeOrder()" data-order-id="{{item.id}}">取消订单</button>
                    <button class="btn" data-orderId="{{item.id}}"
                            data-ordersn="{{item.order_sn}}" wx:if="{{item.type=='weixin'}}">微信付款
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript">

    var ceshiUrl = 'https://yanxuanshop.banband.net/index.php?s=';
    (function () {
        vm = new Vue({
            el: '#app',
            data: {
                list: []
            }
        });
        getlist();
    })();

    function getlist() {
        var url = ceshiUrl + '/Api/Order/index';
        $.ajax({
            type: "POST",
            dataType: "json",
            url: url,
            data: {
                uid: "3",
                page: 0,
                order_type: undefined
            },
            success: function (data) {
                vm.list = data.ord;
//                alert(JSON.stringify(data));
            }
        });

    }

    function go_Order(id) {
        api.openFrame({
            name: 'order_detail',
            url: '../html/order_detail.html',
            bounces: false,
            pageParam: {id: id},
            rect: {
                x: 0,
                // y: headerH,
                w: 'auto'
                // h: frameH
            }
        });
    }

    function goback() {
        api.closeFrame({name: 'dingdan'});
    }

    function removeOrder() {
        api.confirm({
            title: '提示框',
            msg: '您确定要取消此订单吗？',
            buttons: ['确定', '取消']
        }, function (ret, err) {
            var index = ret.buttonIndex;
        });
    }
</script>
</html>